<template>
<!-- 调拨结算高级搜索 -->
    <div class="e-form searchDialog" style="padding-top: 20px;">
        <div class="form">
            <el-form
                label-width="150px"
                :model="searchForm"
            >
                <!-- 日期 -->
                <el-row>
                    <el-col :span="24">
                       <el-form-item label="结算日期：">
                            <div style="display:flex; width: 100%;">
                                <el-date-picker v-model="searchForm.startTime" style="flex:1" type="date" value-format="yyyy-MM-dd"> </el-date-picker>
                                <span class="separate">—</span>
                                <el-date-picker arrow-control v-model="searchForm.endTime"  style="flex:1" type="date"
                                value-format="yyyy-MM-dd">
                                </el-date-picker>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- 所属机构 -->
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="所属机构：">
                            <el-input
                                v-model="searchForm.orgName"
                                placeholder="请选择所属机构"
                                readonly
                            >
                                <i slot="suffix" class="el-input__icon el-icon-document-copy"
                                    @click="onSelectOrg"
                                ></i>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- 调入机构 -->
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="调入机构：">
                            <el-input
                                v-model="searchForm.settleOrgName"
                                placeholder="请选择调入机构"
                                readonly
                            >
                                <i slot="suffix" class="el-input__icon el-icon-document-copy"
                                    @click="supplierOrg"
                                ></i>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- 状态 -->
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="状态：">
                            <el-checkbox
                                v-model="stateCheckAll"
                                @change="stateAll"
                                >全选</el-checkbox
                            >
                            <span class="spacing"></span>
                            <el-checkbox-group v-model="searchForm.states"
                            @change="stateChange"
                            >
                                <el-checkbox
                                    v-for="item in stateList"
                                    :key="item.id"
                                    :label="item.id"
                                >{{item.name}}</el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>

        <!-- <div>{{webData}}</div> -->
        <div style="display: none">{{ localSearchData }}</div>
    </div>
</template>

<script>
import { mapMutations } from 'vuex'
// eslint-disable-next-line no-unused-vars
import { selectDataClient } from '@/utils/common'

export default {
    data () {
        return {
            searchForm: {
                orgId: '', //机构id
                orgName: '', //机构名字
                settleOrgId: '', //结算单位id
                settleOrgName: '', //结算单位名字
                startTime: '', //开始时间
                endTime: '', //结束时间
                states: [], //状态参数
                searching: false
            },
            //状态
            stateList: [{ name: '草稿', id: 0 }, { name: '审核中', id: 1 }, { name: '已审核', id: 2 }, { name: '已作废', id: 5 }, { name: '共享审核', id: 9 }],
            stateCheckAll: false, //状态-是否全选
            webData: ''
        }
    },
    mounted () {
        this.searchForm.orgId = localStorage.getItem('searchOrgId')
        this.searchForm.orgName = localStorage.getItem('searchOrgName')
    },
    computed: {
        localSearchData () {
            // 默认设置搜索标志为false，则不进行搜索回调
            const searchForm = this.searchForm
            searchForm.searching = false
            this.setSearchData(searchForm)
            return searchForm
        }
    },
    methods: {
        ...mapMutations(['setSearchData', 'setSelectedInfo']),
        //选择所属机构
        onSelectOrg () {
            selectDataClient({
                SelectServiceToken: '/hr/org/getChildrenOrg', // 客户端对应方法名
                IsSingleMode: true, // 是否单选 true 单选 false 多选
                SelectedIDs: [], // 已选中id(注意：是上一次已选中的id，不是要传的参数，如果第一次选，则传[])
                InitParamsStr: '',    // 接口参数(name为模拟参数)
                Title: '选择所属机构' // 标题
            }).then(val => {
                const res = val[0]
                this.searchForm.orgId = res.orgId
                this.searchForm.orgName = res.orgName
            })
        },
        //选择调入机构
        supplierOrg () {
            selectDataClient({
                SelectServiceToken: '/hr/org/getAllOrgPage', // 客户端对应方法名
                IsSingleMode: true, // 是否单选 true 单选 false 多选
                SelectedIDs: [], // 已选中id(注意：是上一次已选中的id，不是要传的参数，如果第一次选，则传[])
                InitParamsStr: '', // 接口参数(name为模拟参数)
                Title: '选择调入机构' // 标题
            }).then(val => {
                const res = val[0]
                this.webData = res
                this.searchForm.settleOrgId = res.orgId
                this.searchForm.settleOrgName = res.orgName
            })
        },
        //状态-是否全选事件
        stateAll (val) {
            this.searchForm.states = val ? this.stateList.map(item=>item.id) : []
        },
        //状态-不同状态是否勾选事件
        stateChange (val) {
            this.stateCheckAll = val.length == this.stateList.length
        },
    },
}
</script>

<style lang="scss" scoped>
.searchDialog{
    ::v-deep.el-input--suffix{
        i{display: flex; align-items: center;}
    }
    .el-checkbox-group{display: flex;}
    ::v-deep.el-checkbox{display: flex; align-items: center;}
}
.spacing {
    margin-left: 20px;
}
</style>